<!doctype html>
<html>
    <head>
        <style>
            .foo {
                width:50px;
                height:50px;
                background: pink;
                position: absolute;
            }

            #canvas {
                overflow:hidden;
                width:1000px;
                height:600px;
                border:2px solid skyblue;
            }
        </style>
    </head>

    <body>
        <button>GO</button>

        <div id="canvas"></div>

        <script src="../node_modules/mottle/js/mottle.js"></script>
        <script src="../src/default-katavorio-helper.js"></script>
        <script src="../src/katavorio.js"></script>

        <script>
            (function() {

                var canvas = document.getElementById("canvas");
                var cw = canvas.offsetWidth, ch = canvas.offsetHeight;
                var button = document.querySelector("button");
                var m = new Mottle();
                var seh = new DefaultKatavorioHelper();
                var k = new Katavorio({
                    getPosition: seh.getPosition,
                    setPosition: seh.setPosition,
                    getSize: seh.getSize,
                    addClass: seh.addClass,
                    removeClass: seh.removeClass,
                    bind: seh.addEvent,
                    unbind: seh.removeEvent,
                    fireEvent: function () {
                        console.log(arguments);
                    },
                    intersects: seh.intersects,
                    indexOf: seh.indexOf,
                    getId: seh.getId
                });
                var divs = [];
                var ad = function() {
                    var d = document.createElement("div");
                    d.className="foo";
                    canvas.appendChild(d);
                    divs.push(d);
                    var p = rnd();
                    d.style.left = p.left + "px";
                    d.style.top = p.top + "px";
                    k.draggable(d);
                    k.droppable(d);
                    return d;
                };
                var cleanup = function() {
                    for (var i = 0; i < divs.length; i++) {
                        k.destroyDraggable(divs[i]);
                        k.destroyDroppable(divs[i]);
                        divs[i].parentNode.removeChild(divs[i]);
                    }
                    divs.length = 0;
                };

                var rnd = function() {
                    return {
                        left: Math.max(0, Math.floor(Math.random() * cw)),
                        top: Math.max(0, Math.floor(Math.random() * ch))
                    };
                };

                var count = 50;
                var go = function() {
                    cleanup();
                    for (var i = 0; i < count; i++) {
                        ad();
                    }
                };

                m.on(button, "click", go);

            })();
        </script>
    </body>

</html>